<template>
  <qx-table :dbRowClick="rowDblClick" :option="tableOption" :remoteData="remoteData">
    <template v-slot:top>
      <qx-form v-model="searchForm" :option="tableOption" isSearch @submit="startSearch"></qx-form>
    </template>
    <template v-slot:menuLeftR>
      <q-icon color="warning" name="mdi-map-marker-question cursor-pointer cursor-hover" size="1.5rem">
        <q-tooltip class="q-pa-md" v-bind="$tooltipAttr">{{ $t('Misc.DblClickTips') }}</q-tooltip>
      </q-icon>
    </template>
  </qx-table>
  <q-modal v-model="modalVisible" :header="`${$t('Misc.SpecifyDetails')}`" :menuBtn="false" :persistent="false"
           width="620">
    <QInfo :columns="tableOption.column || []" :rowInfo="rowInfo" cols="2" headerWidth="80"></QInfo>
  </q-modal>
  <q-modal v-model="areaMapVisible" v-model:loading="loading" :header="$t('MapCore.AreaMapAlarmLocationView')"
           :menuBtn="false" :persistent="false" fullHeight fullWidth>
    <IndexMonitoring :alarmAMRs="alarmAMRs" :assignedMap="rowInfo" nonHeader nonMaps></IndexMonitoring>
  </q-modal>
</template>
<script setup>
import { i18n } from 'boot/i18n.js'
import { postAPI } from 'src/api/index.js'
import IndexMonitoring from 'src/views/MapCore/IndexMonitoring.vue'
import { computed, onMounted, ref } from 'vue'

const rowInfo = ref({})
const alarmAMRs = ref([])
const searchForm = ref({})
const loading = ref(false)
const modalVisible = ref(false)
const areaMapVisible = ref(false)
const remoteData = ref({ dicUrl: '/tpm/yfagv/api/newMapTrafficRuleWarn/list' })
const tableOption = computed(() => {
  return {
    span: 22, export: true, labelWidth: 90, searchSpan: 5,
    column: [{
      label: `${i18n.t('MapCore.AreaName')}`, field: 'areaCode', minWidth: 100, cellClick: row => handleAreaMap(row),
      format: (_, row = {}) => `${row.mapName || ''}--${row.areaName || ''}`
    }, {
      label: `${i18n.t('AGVCore.AlarmRule')}`, field: 'RelatedAlarmRule', minWidth: 70, search: false,
      display: false, format: (_, { agvSum: count = 0, ruleName, warnTime: times = 0, congestionType }) => {
        if (congestionType === '1') return `${ruleName || ''}：${i18n.t('AGVCore.AlarmRuleTip3', { count, times })}`
        return `${ruleName || ''}：${i18n.t('AGVCore.AlarmRuleTip4', { count, times })}`
      }
    }, {
      label: `${i18n.t('AGVCore.AlarmDescription')}`, field: 'warnMsg', minWidth: 80, search: false
    }, {
      label: `${i18n.t('AGVCore.AlarmDeviceCode')}`, field: 'agvCode', minWidth: 80, search: false,
      format: (val = '') => val ? JSON.parse(val).join(', ') : ''
    }, {
      label: `${i18n.t('AGVCore.StartAlarmTime')}`, field: 'createdTime', type: 'daterange', minWidth: 80
    }, {
      label: `${i18n.t('AGVCore.EndAlarmTime')}`, field: 'updatedTime', minWidth: 80, search: false
    }, {
      label: `${i18n.t('AGVCore.AlarmDuration')}`, field: 'warnTime', minWidth: 80, search: false
    }]
  }
})

const handleAreaMap = ({ agvCodePosition, id }) => {
  loading.value = true
  areaMapVisible.value = true
  alarmAMRs.value = agvCodePosition ? JSON.parse(agvCodePosition) : []
  postAPI('/tpm/yfagv/api/newMapTrafficAreaRule/mapArea', { id }, data => {
    rowInfo.value = data
    loading.value = false
  }, () => loading.value = false)
}
const rowDblClick = row => {
  rowInfo.value = row
  modalVisible.value = true
}
const formatSearchForm = () => {
  const params = { ...searchForm.value }
  if (searchForm.value.createdTime?.from) {
    params.startTime = params.createdTime?.from
    params.endTime = params.createdTime?.to
    delete params.createdTime
  }
  return { ...params }
}
const startSearch = (_, done) => {
  remoteData.value.params = formatSearchForm()
  remoteData.value.clearSelected = true
  if (done) done()
}

onMounted(startSearch)
</script>